<template>
  <div
    class="section-title"
    :class="{
      'admin-style': isAdmin,
      center: align === 'center',
      right: align === 'right',
    }"
  >
    <!-- 前台风格 -->
    <template v-if="!isAdmin">
      <div class="title-wrapper">
        <!-- 装饰线条 -->
        <div v-if="showLine" class="title-line"></div>

        <!-- 图标 -->
        <div v-if="icon" class="title-icon">
          <el-icon><component :is="icon" /></el-icon>
        </div>

        <!-- 标题文本 -->
        <div class="title-content">
          <h2 class="main-title">
            {{ title }}
            <small v-if="subtitle" class="subtitle">{{ subtitle }}</small>
          </h2>
          <p v-if="description" class="description">{{ description }}</p>
        </div>

        <!-- 更多链接 -->
        <div v-if="showMore" class="more-link">
          <el-button type="text" @click="handleMore">
            {{ moreText }}
            <el-icon class="ml-1"><ArrowRight /></el-icon>
          </el-button>
        </div>
      </div>
    </template>

    <!-- 后台风格 -->
    <template v-else>
      <a-typography-title :heading-level="level" :style="{ marginBottom: '0' }">
        <template v-if="icon" #prefix>
          <icon-component :type="icon" />
        </template>
        {{ title }}
        <template v-if="subtitle">
          <a-typography-text type="secondary" class="ml-2">
            {{ subtitle }}
          </a-typography-text>
        </template>
      </a-typography-title>
      <a-typography-paragraph v-if="description">
        {{ description }}
      </a-typography-paragraph>
    </template>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";

const props = defineProps({
  isAdmin: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    required: true,
  },
  subtitle: {
    type: String,
    default: "",
  },
  description: {
    type: String,
    default: "",
  },
  icon: {
    type: [String, Object],
    default: "",
  },
  level: {
    type: Number,
    default: 2,
    validator: (value) => [1, 2, 3, 4, 5].includes(value),
  },
  align: {
    type: String,
    default: "left",
    validator: (value) => ["left", "center", "right"].includes(value),
  },
  showLine: {
    type: Boolean,
    default: true,
  },
  showMore: {
    type: Boolean,
    default: false,
  },
  moreText: {
    type: String,
    default: "查看更多",
  },
  moreLink: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["more"]);

// 处理更多按钮点击
const handleMore = () => {
  emit("more", props.moreLink);
};
</script>

<style lang="scss" scoped>
.section-title {
  @apply mb-6;

  &.center {
    @apply text-center;

    .title-wrapper {
      @apply justify-center;
    }

    .title-line {
      @apply left-1/2 -translate-x-1/2;
    }
  }

  &.right {
    @apply text-right;

    .title-wrapper {
      @apply justify-end;
    }

    .title-line {
      @apply right-0;
    }
  }

  .title-wrapper {
    @apply relative flex items-center;
  }

  .title-line {
    @apply absolute bottom-0 left-0 w-12 h-1 bg-primary-600;
  }

  .title-icon {
    @apply mr-3 text-xl text-primary-600;
  }

  .title-content {
    @apply flex-1;

    .main-title {
      @apply text-2xl font-bold text-gray-900 dark:text-white mb-1;

      .subtitle {
        @apply ml-2 text-base font-normal text-gray-500 dark:text-gray-300;
      }
    }

    .description {
      @apply text-sm text-gray-600 dark:text-gray-400;
    }
  }

  .more-link {
    @apply ml-4;

    :deep(.el-button) {
      @apply text-primary-600 dark:text-primary-400;

      &:hover {
        @apply text-primary-700 dark:text-primary-300;
      }
    }
  }

  &.admin-style {
    :deep(.arco-typography) {
      @apply flex items-center;

      .arco-icon {
        @apply mr-2 text-primary-600;
      }
    }
  }
}
</style>
